/** 
 投资建议书组件
 zhanghaitao
 入参：
 proposalType: 1- 明细  2- 审批  3-ETF建议书
*/
import React, { PureComponent } from 'react';
import { FirstHeaderC, SecondHeaderC, InputNumberC, FormGroup, DATA_ENTRY } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, InputNumber } from 'antd';
import EftBuySellC from '../../InvestmentManage/EtfTradeNew/orderComps/eftBuySell';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
import { fixedNum } from '../../../utils/utils';
import moment from 'moment';
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 4, offset: 0 },
    sm: { span: 8, offset: 0 },
    md: { span: 8, offset: 0 },
    lg: { span: 8, offset: 0 },
    xl: { span: 10, offset: 0 },
    xxl: { span: 8, offset: 0 },
  },
  wrapperCol: {
    xs: { span: 18, offset: 0 },
    sm: { span: 14, offset: 0 },
    md: { span: 14, offset: 0 },
    lg: { span: 14, offset: 0 },
    xl: { span: 12, offset: 0 },
    xxl: { span: 14, offset: 0 },
  },
};
class EtfProposalC extends PureComponent {
  static defaultProps = {
    onRef: () => {},
    portfolioOnChange: () => {},
    tradingcodeOnChange: () => {},
  };
  state = {
    info: undefined, //etf详情
    type: undefined, //当前指令的类型type：2-etf建议书   4-详情
  };

  componentDidMount() {
    this.props.onRef(this);
  }

  // 不同建议书渲染内容
  formRender = () => {
    const { type, proposalType, info, currentUser } = this.props;
    let disabled;
    if (type == 4) {
      disabled = true;
    } else {
      disabled = false;
    }
    switch (proposalType) {
      case 3:
        return (
          <FormGroup
            dataSource={[
              {
                dataIndex: 'investProposalName',
                type: DATA_ENTRY.INPUT,
                title: '建议书名称',
                disabled: disabled,
                initialValue: info ? info.investProposalName : null,
                rules: [
                  { required: true, message: '请输入建议书名称' },
                  { pattern: /^[^\s]*$/, message: '不得输入空格' },
                ],
                placeholder: '建议书名称',
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'applyDate',
                type: DATA_ENTRY.SINGLEDATE,
                title: '填写日期',
                disabled: true,
                initialValue: moment(),
                rules: [{ required: true, message: '填写日期' }],
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'applyerName',
                type: DATA_ENTRY.INPUT,
                title: '申请人',
                disabled: true,
                initialValue: currentUser.name || 'name',
                rules: [{ required: true, message: '申请人' }],
                placeholder: '申请人',
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'applyer',
                type: DATA_ENTRY.INPUT,
                title: '申请人工号',
                disabled: true,
                initialValue: currentUser.userId || 'userId',
                rules: [{ required: true, message: '申请人工号' }],
                placeholder: '申请人工号',
                span: 8,
                controlLabelSpan: 6,
              },
            ]}
            autoLayout={false}
            onRef={(ref) => (this.formGroupThis = ref)}
          />
        );

      default:
        return (
          <FormGroup
            dataSource={[
              {
                dataIndex: 'proposalName',
                type: DATA_ENTRY.INPUT,
                title: '建议书名称',
                disabled: true,
                initialValue: info ? info.proposalName : null,
                rules: [{ required: true }],
                placeholder: '建议书名称',
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'proposalWriteDate',
                type: DATA_ENTRY.INPUT,
                title: '填写日期',
                disabled: true,
                initialValue: info ? info.proposalWriteDate : null,
                rules: [{ required: true }],
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'proposalStatus',
                type: DATA_ENTRY.INPUT,
                title: '建议书状态',
                disabled: true,
                initialValue: info ? info.proposalStatus : null,
                rules: [{ required: true }],
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'username',
                type: DATA_ENTRY.INPUT,
                title: '申请人',
                disabled: true,
                initialValue: info ? info.username : null,
                rules: [{ required: true }],
                placeholder: '申请人',
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'userid',
                type: DATA_ENTRY.INPUT,
                title: '申请人工号',
                disabled: true,
                initialValue: info ? info.userid : null,
                rules: [{ required: true }],
                span: 8,
                controlLabelSpan: 6,
              },
              {
                dataIndex: 'proposalType',
                type: DATA_ENTRY.INPUT,
                title: '建议书类型',
                disabled: true,
                initialValue: info ? info.proposalType : null,
                rules: [{ required: true }],
                span: 8,
                controlLabelSpan: 6,
              },
            ]}
            autoLayout={false}
            onRef={(ref) => (this.formGroupThis = ref)}
          />
        );
    }
  };
  // 成交信息
  clinchForm = () => {
    const { info } = this.props;
    return (
      <div style={{ marginTop: '10px' }}>
        <SecondHeaderC title='成交信息' />
        <div style={{ paddingRight: '8px' }}>
          <Row>
            <Col span={6}>
              <InputNumberC
                dataIndex={'realOrderPrice'}
                title={'成交均价'}
                form={this.props.form}
                unit={'元'}
                initialValue={info && info.realOrderPrice}
                splitStyle={true}
                precision={3}
                disabled={true}
                formItemLayout={formItemLayout}
              />
            </Col>
            <Col span={6}>
              <InputNumberC
                dataIndex={'realOrderQty'}
                title={'累计成交数量'}
                form={this.props.form}
                unit='股'
                initialValue={info && info.realOrderQty}
                splitStyle={true}
                precision={0}
                disabled={true}
                formItemLayout={formItemLayout}
              />
            </Col>
            <Col span={6}>
              <InputNumberC
                dataIndex={'turnoverMoney'}
                title={'累计成交金额'}
                form={this.props.form}
                unit='元'
                initialValue={info && info.turnoverMoney}
                splitStyle={true}
                precision={3}
                disabled={true}
                formItemLayout={formItemLayout}
              />
            </Col>
            <Col span={6}>
              <InputNumberC
                dataIndex={'nullTurnover'}
                title={'未成交数量'}
                form={this.props.form}
                unit='股'
                initialValue={info && info.nullTurnover}
                splitStyle={true}
                precision={0}
                disabled={true}
                formItemLayout={formItemLayout}
              />
            </Col>
          </Row>
        </div>
      </div>
    );
  };
  //ETF查询明细时from内容
  detailForm = () => {
    const {
      form: { getFieldDecorator },
      info,
    } = this.props;
    return (
      <div>
        <Form>
          <Row>
            <Col span={8}>
              <FormItem label='成交价格' {...formItemLayout}>
                {getFieldDecorator('realOrderPrice', {
                  initialValue: info ? info.realOrderPrice : null,
                  rules: [{ required: true }],
                })(
                  <InputNumber
                    onChange={(val) => this.calculateAmount(val, 'price')}
                    disabled={true}
                    style={{ width: '100%', height: '90%' }}
                    precision={3}
                    min={0.001}
                    max={999999999999}
                    formatter={(inValue) => fixedNum(inValue)}
                    parser={(inValue) => inValue.replace(/\$\s?|(,*)/g, '')}
                  />,
                )}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label='成交数量' {...formItemLayout}>
                {getFieldDecorator('realOrderQty', {
                  initialValue: info ? info.realOrderQty : null,
                  rules: [{ required: true }],
                })(
                  <InputNumber
                    disabled={true}
                    style={{ width: '100%', height: '90%' }}
                    precision={4}
                    min={0}
                    max={999999999999}
                    formatter={(inValue) => fixedNum(inValue)}
                    parser={(inValue) => inValue.replace(/\$\s?|(,*)/g, '')}
                  />,
                )}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label='费用' {...formItemLayout}>
                {getFieldDecorator('expense', {
                  initialValue: info ? info.expense : null,
                  rules: [{ required: true }],
                })(
                  <InputNumber
                    disabled={true}
                    style={{ width: '100%', height: '90%' }}
                    precision={2}
                    min={0}
                    max={999999999999}
                    formatter={(inValue) => fixedNum(inValue)}
                    parser={(inValue) => inValue.replace(/\$\s?|(,*)/g, '')}
                  />,
                )}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <FormItem label='成交比例' {...formItemLayout}>
                {getFieldDecorator('realOrderProportion', {
                  initialValue: info ? info.realOrderProportion : null,
                })(
                  <InputNumber
                    disabled={true}
                    style={{ width: '100%' }}
                    precision={4}
                    min={0}
                    max={999999999999}
                    formatter={(inValue) => fixedNum(inValue)}
                    parser={(inValue) => inValue.replace(/\$\s?|(,*)/g, '')}
                  />,
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    );
  };

  render() {
    return (
      <div>
        {this.props.type == 2 && <FirstHeaderC title={'基金买卖建议书'} />}
        {this.props.proposalType == 1 && <SecondHeaderC title={'建议书信息'} />}
        <div className={'grayBg'}>{this.formRender()}</div>
        <div>
          <EftBuySellC
            type={this.props.type}
            etfType={this.props.type == 2 && true} //etf建议书标志
            proposal={true}
            proposalType={this.props.proposalType}
            info={this.props.info}
            onRef={(ref) => (this.etfBuySell = ref)}
            portfolioOnChange={this.props.portfolioOnChange}
            tradingcodeOnChange={this.props.tradingcodeOnChange}
            position={this.props.position}
            tradeModel={['BOOKKEEPING_MODE', 'COMMAND_MODE']} //不包含估值解析和估值对接的产品
          />
        </div>
        {/* 成交信息 只有明细的时候需要  审批不需要 */}
        {this.props.proposalType == 1 && <div className={'grayBg'}>{this.clinchForm()}</div>}
      </div>
    );
  }
}
export default connect(({ etfProposalM, loading }) => ({
  etfProposalM,
  loading,
}))(Form.create()(EtfProposalC));
